<template>
  <main-wrap>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="wrapper">
      <div class="msgListWrap">
        <div class="weui-panel weui-panel_access mycard">
          <div class="weui-panel__bd">
            <stat-card :ostat="ostat" :stattext="order_detail.isReceiptStr" :otime="order_detail.createTime" :onum="order_detail.number" v-if="statcardok"></stat-card>
          </div>
          <!-- 维修工人显示 -->
          <div class="weui-panel__ft" v-if="repairByMe && (ostat === '20' || ostat === '30' || ostat === '31' || ostat === '50')">
            <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
              <router-link :to="'/mreportdetail'" class="weui-cell__bd blue">查看更多</router-link>
              <span class="weui-cell__ft"></span>
            </a>
          </div>
        </div>

        <!-- 报修信息块，维修工人显示 -->
        <od-info class="mtp4" :rtype="order_detail.labelId" :attach="order_detail.attachments" v-if="repairByMe"></od-info>

        <!-- 报修信息块，管理端显示 -->
        <od-user class="mtp4" v-if="!repairByMe && rolecode !== '4' && (ostat === '10' || ostat === '11' || ostat === '20' || ostat === '30' || ostat === '31' || ostat === '50')" :uname="order_detail.createByUserObj ? order_detail.createByUserObj.name : ''" :utag="order_detail.createByUserObj ? order_detail.createByUserObj.deptNames : ''" :uphone="order_detail.createByUserObj ? order_detail.createByUserObj.mobile : ''" :utx="order_detail.createByUserObj ? order_detail.createByUserObj.avatarUrl : ''" :udesc="order_detail.desc" :ulink="'/reportdetail'"></od-user>

        <od-user class="mtp4" v-if="!repairByMe && rolecode !== '4' && (ostat === '20' || ostat === '30' || ostat === '31' || ostat === '50')" :uname="order_detail.repairUserObj ? order_detail.repairUserObj.name : ''" :utag="order_detail.repairUserObj ? order_detail.repairUserObj.roleValues : ''" :uphone="order_detail.repairUserObj ? order_detail.repairUserObj.mobile : ''" :utx="order_detail.repairUserObj ? order_detail.repairUserObj.avatarUrl : ''" :udesc="order_detail.repairDesc" :umoney="order_detail.expectedCost" :ulink="'/mreportdetail'"></od-user>

        <!-- 预约时间 -->
        <od-appoint v-if="repairByMe && (ostat === '0' || ostat === '10')" class="mtp4" :appointtimes="order_detail.prearrangedTime" :ctime="order_detail.createTime" :expect="appointIn"></od-appoint>

        <!-- 显示是否按时预约，超时才显示 -->
        <od-overtime v-if="(ostat !== '0' && ostat !== '10') && appointOvertimeText != ''" hdtext="预约超时" :otime="order_detail.acceptRepairTime" :showtext="appointOvertimeText" class="mtp4"></od-overtime>

        <!-- 上门时间 -->
        <od-arrive v-if="ostat === '11'" class="mtp4" :appointdate="order_detail.repairDate" :appointbtime="order_detail.repairBeginTime" :appointetime="order_detail.repairEndTime" :otime="appointtimestr"></od-arrive>

        <!-- 显示是否按时上门，超时才显示 -->
        <od-overtime v-if="ostat !== '0' && ostat !== '10' && ostat !== '11' && arriveOvertimeText != ''" hdtext="上门超时" :otime="order_detail.reportTime" :showtext="arriveOvertimeText" class="mtp4"></od-overtime>

        <!-- 审批意见，有内容才显示 -->
        <od-auth v-if="(ostat === '31' || ostat === '50') && order_detail.decisionDesc" class="mtp4"></od-auth>

        <!-- 用戶评价 -->
        <od-opinion class="mtp4" v-if="ostat === '50' && order_detail.userEvaluate"></od-opinion>
      </div>

      <div class="paddingP3 mtp4">
        <a href="javascript:;" class="weui-btn weui-btn_primary" @click="goAppoint" v-if="(ostat === '0' || ostat === '10') && rolecode !== '4' && repairByMe">预约</a>
        <router-link to="/mreport" class="weui-btn weui-btn_primary" v-if="ostat === '11' && rolecode !== '4' && repairByMe">填写维修报告</router-link>
        <a href="javascript:;" class="weui-btn weui-btn_primary" @click="goReport" v-if="ostat === '20' && rolecode !== '4' && repairByMe">上报审批</a>
        <router-link to="/mreport" class="weui-btn weui-btn_default" v-if="ostat === '20' && rolecode !== '4' && repairByMe">重新填写</router-link>

        <router-link to="/decision" class="weui-btn weui-btn_primary" v-if="rolecode !== '0' && rolecode !== '4' && ostat === '30' && !repairByMe">批示</router-link>
      </div>
    </van-pull-refresh>

    <my-confirm ref="myconfirm" confirmButtonText="确定" confirmType="info" title="确认" message="上报审批维修报告" descri="" @myes="gotoReport"></my-confirm>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import StatCard from '@/components/statcard'
import MyConfirm from '@/components/myconfirm'

import OdInfo from './odInfo'
import OdAuth from './odAuth'
import OdOpinion from '@/components/odOpinion'
import OdOvertime from './odOvertime'
import OdAppoint from './odAppoint'
import OdArrive from './odArrive'

import OdUser from './odUser'

import { mapState, mapActions } from 'vuex'
export default {
  name: 'OrderDetail',
  data () {
    return {
      rolecode: localStorage.rolecode ? localStorage.rolecode : '0',

      refreshing: false,
      statcardok: false, // 刷新状态块所用
      ostat: localStorage.ostat ? localStorage.ostat : '0', // 维修状态
      repairByMe: false,

      // oreporttime: 1542721515, // 报修时间，在此之后30分钟内预约上门
      // appointtimes: ['2月5日\n13:00-6:00', '2月7日\n13:00-6:00', '2月8日\n13:00-6:00'],
      // appointtime: 1542778308, // 上门时间

      // appointOvertimeText: '1天 01:30:09', // 预约超时时间提示文字
      // arriveOvertimeText: '1天 01:30:09', // 上门超时时间提示文字
      appointIn: this.cm.appointOvertime, // 报修后应该在该秒数内预约时间
      appointtimestr: '',
      appointOvertimeText: '',
      arriveOvertimeText: ''
    }
  },
  components: {
    MainWrap,
    StatCard,
    MyConfirm,

    OdInfo,
    OdAuth,
    OdOpinion,
    OdOvertime,
    OdAppoint,
    OdArrive,

    OdUser
  },
  computed: {
    ...mapState(['order_detail'])
  },
  watch: {
    order_detail () {
      this.statcardok = false
      localStorage.ostat = this.order_detail.isReceipt
      this.ostat = this.order_detail.isReceipt
      this.repairByMe = (this.order_detail.repairUserId + '') === sessionStorage.userId

      setTimeout(() => {
        this.statcardok = true
      }, 400)

      if (this.order_detail.repairDate) {
        this.appointtimestr = this.order_detail.repairDate.slice(0, 10) + ' ' + this.order_detail.repairBeginTime.slice(0, 5) + '-' + this.order_detail.repairEndTime.slice(0, 5)
      }

      if (this.order_detail.acceptRepairTime) {
        let appointOvertime = Math.round(Date.parse(this.order_detail.acceptRepairTime.replace(/-/g, '/')) / 1000) - Math.round(Date.parse(this.order_detail.createTime.replace(/-/g, '/')) / 1000) - this.appointIn
        if (appointOvertime > 0) this.appointOvertimeText = this.cm.gettimestr2(appointOvertime)
      }

      if (this.order_detail.reportTime) {
        let arriveEndTime = this.order_detail.repairDate.slice(0, 10) + ' ' + this.order_detail.repairEndTime
        let arriveOvertime = Math.round(Date.parse(this.order_detail.reportTime.replace(/-/g, '/')) / 1000) - Math.round(Date.parse(arriveEndTime.replace(/-/g, '/')) / 1000)
        if (arriveOvertime > 0) this.arriveOvertimeText = this.cm.gettimestr2(arriveOvertime)
      }

      this.$toast.clear()
      this.refreshing = false
    }
  },
  created () {
    this.$toast.loading({
      duration: 0,
      message: '数据获取中...'
    })
    if (this.$route.params.oid) localStorage.oid = this.$route.params.oid
    this.getOrderDetail()
  },
  methods: {
    ...mapActions(['getOrderDetail']),
    goAppoint () {
      this.$toast.loading({
        duration: 0,
        message: '请稍等...'
      })

      let atimes = localStorage.appointTime.split('#')

      this.cm.myajax('/sys/userrepair/staffChckRepairTime', {
        repairId: localStorage.oid,
        repairDate: atimes[0],
        repairStartTime: atimes[1],
        repairEndTime: atimes[2]
      }, (data) => {
        // localStorage.ostat = '11'
        // this.statcardok = false
        // this.$nextTick(() => {
        //   this.statcardok = true
        // })
        // this.ostat = '11'
        this.getOrderDetail()
      })
    },
    goReport () {
      this.$refs.myconfirm.show()
    },
    gotoReport () {
      this.$toast.loading({
        duration: 0,
        message: '请稍等...'
      })

      this.cm.myajax('/sys/userrepair/reportToForeman', {
        repairId: localStorage.oid
      }, (data) => {
        // this.$toast.clear()
        // this.statcardok = false
        // this.$nextTick(() => {
        //   this.statcardok = true
        // })
        // localStorage.ostat = '30'
        // this.ostat = '30'
        this.getOrderDetail()
      })
    },
    onRefresh () {
      this.getOrderDetail()
    }
  }
}
</script>

<style lang="stylus" scoped>
/* 使分隔线的右端不顶到边 */
.weui-panel >>> .weui-cell:before
  right 15px

.wrapper
  height calc(100vh)
  overflow auto
</style>
